<template>
  <el-card class="form-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <h3>运费信息</h3>
      </div>
    </template>
    
    <div v-if="showDistanceInfo" class="distance-info">
      <div class="info-item">
        <span class="label">寄收地址：</span>
        <span>{{ senderFullAddress }} → {{ recipientFullAddress }}</span>
      </div>
      <div class="info-item">
        <span class="label">距离估算：</span>
        <span>{{ estimatedDistance }} 公里</span>
      </div>
    </div>
    
    <el-form-item label="服务类型" prop="serviceType">
      <el-radio-group v-model="modelValue.serviceType" @change="handleServiceChange">
        <el-radio label="standard">标准快递</el-radio>
        <el-radio label="express">特快服务</el-radio>
        <el-radio label="economy">经济服务</el-radio>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="增值服务" prop="additionalServices">
      <el-checkbox-group v-model="modelValue.additionalServices" @change="handleServiceChange">
        <el-checkbox label="signatureRequired">签名确认</el-checkbox>
        <el-checkbox label="smsNotification">短信通知</el-checkbox>
        <el-checkbox label="priorityHandling">优先处理</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    
    <div class="freight-breakdown">
      <div class="breakdown-title">运费明细</div>
      <div class="breakdown-item">
        <span>基础运费</span>
        <span>¥{{ baseFreight.toFixed(2) }}</span>
      </div>
      <div class="breakdown-item">
        <span>重量附加费</span>
        <span>¥{{ weightSurcharge.toFixed(2) }}</span>
      </div>
      <div class="breakdown-item">
        <span>保价费</span>
        <span>¥{{ insuranceFee.toFixed(2) }}</span>
      </div>
      <div class="breakdown-item">
        <span>服务附加费</span>
        <span>¥{{ serviceSurcharge.toFixed(2) }}</span>
      </div>
      <div class="breakdown-item total">
        <span>合计</span>
        <span>¥{{ modelValue.freight.toFixed(2) }}</span>
      </div>
    </div>

    <el-form-item label="支付方式" prop="paymentMethod">
      <el-radio-group v-model="modelValue.paymentMethod" @change="handleInput">
        <el-radio label="online">在线支付</el-radio>
        <el-radio label="cod">货到付款</el-radio>
        <el-radio label="monthly">月结账户</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

interface FreightData {
  serviceType: string
  additionalServices: string[]
  freight: number
  paymentMethod: string
}

const props = defineProps<{
  modelValue: FreightData
  showDistanceInfo: boolean
  senderFullAddress: string
  recipientFullAddress: string
  estimatedDistance: number
  baseFreight: number
  weightSurcharge: number
  insuranceFee: number
  serviceSurcharge: number
}>()

const emit = defineEmits<{
  'update:modelValue': [value: FreightData]
  'serviceChange': []
}>()

const handleInput = () => {
  emit('update:modelValue', { ...props.modelValue })
}

const handleServiceChange = () => {
  emit('serviceChange')
  handleInput()
}
</script>

<style scoped>
.form-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.distance-info {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}

.info-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #909399;
  margin-right: 8px;
}

.freight-breakdown {
  margin: 20px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-title {
  background-color: #f5f7fa;
  padding: 10px 16px;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #ebeef5;
}

.breakdown-item:last-child {
  border-bottom: none;
}

.breakdown-item.total {
  background-color: #fdf6ec;
  font-weight: 600;
  color: #e6a23c;
}
</style>